<template>
  <div id="app" class="ds-continer ds-bg2">
    <header class="ds-header ds-stack">
      <div class="ds-horizontal ds-fixed">
        <div class="ds-title1-left ds-grow">
          <!-- 用于刷新页面 -->
          <a href=""
            ><img
              src="data-show/images/logo.imge"
              style="height: 16px; vertical-align: middle"
          /></a>
          <span style="padding-left: 0.5em"></span>
          <a @click="openAbout">关于</a>
           <span style="padding-left: 0.5em"></span>
          <input v-model="search" class="bj-input" type="text" placeholder="输入经纬坐标(120.123,20.56)" />
          <button class="bj-button bj-button-primary" @click="submit" >
            搜索
          </button>
        </div>
        <div class="ds-title1-right ds-grow">
          <span>{{ time }}</span>
        </div>
      </div>
      <div class="ds-title1 ds-top ds-center">{{ name }}</div>
    </header>
    <div class="ds-content ds-stack">
      <my-main :center="search" :centerTo="centerTo" @select="select">
      </my-main>
      <my-about v-show="about" @close="openAbout"> </my-about>
    </div>

    <timer :interval="1000" @move="getTime"></timer>
  </div>
</template>

<script>
import { format } from "./utils/time";

import MyMain from "./views/my-main.vue";
import MyAbout from "./views/my-about.vue";
export default {
  name: "App",
  components: {
    MyMain,
    MyAbout,
  },
  data() {
    return {
      name: "GIS信息系统",
      time: null,
      search: "",
      about: false,
      centerTo: false,
    };
  },
  computed: {},
  mounted() {
    const _this = this;
    // 窗口尺寸事件
    const resized = function (children) {
      if (children) {
        for (let i = 0, length = children.length; i < length; i++) {
          if (children[i].resized) {
            children[i].resized.call(children[i]);
          }
          if (children[i].$children) {
            resized(children[i].$children);
          }
        }
      }
    };
    window.addEventListener("resize", function () {
      resized(_this.$children);
    });

    this.$http.get("name").then((res) => {
      _this.name = res.data;
    });
  },
  beforeDestroy() {},
  methods: {
    getTime() {
      this.time = format("yyyy-MM-dd HH:mm:ss"); // 修改数据 每秒
    },
    submit() {
      if (this.search.length == 0) {
        console.log("参数错误");
        return;
      }
      this.centerTo = !this.centerTo;
    },
    openAbout() {
      this.about = !this.about;
    },
    select(data) {
      data[0] = data[0].toFixed(5);
      data[1] = data[1].toFixed(5);
      this.search = data;
    },
  },
};
</script>

<style></style>
